<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫眼电影</title>
    <style>
        *{margin: 0;padding:0;box-sizing: border-box}
        .container{
            width: 750px;
            margin: 50px auto;
        }
        .movie-list{
            padding-top: 20px;
            margin: 0 -15px;
        }

        .item{
            width: 25%;
            float: left;
            padding: 0 15px;
            position: relative;
        }

        .item .img{
            position: relative;
        }
        .item .type{
            position: absolute;
            left: -2px;
            top: 2px;
            background: rgb(0, 132, 255);
            font-size: 12px;
            color: white;
            font-style: italic;
            font-weight: bold;
            padding: 3px 4px;
        }

        .item .title{
            text-align: center;
            padding-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="root">
        
    </div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
        // https://maoyan.com/?utm_source=meituanweb    猫眼电影热映榜
        let movies = [
            {
                title: '怒火·重案',
                img: 'https://p1.meituan.net/moviemachine/51b193283628a62b85ba31ddc818ffde1560410.jpg@320w_440h_1e_1c',
                rate: 9.5,
                type: '3DIMAX'
            },
            {
                title: '盛夏未来',
                img: 'https://p0.meituan.net/movie/056cce783466d9531ad736068c2e134e4100879.jpg@320w_440h_1e_1c',
                rate: 9.2,
                type: '2DIMAX'
            }, {
                title: '白蛇2：青蛇劫起',
                img: 'https://p0.meituan.net/movie/cba20984e8e4423598913077e515b6121686728.jpg@320w_440h_1e_1c',
                rate: 9.1,
                type: '3D'
            }, {
                title: '中国医生',
                img: 'https://p1.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@320w_440h_1e_1c',
                rate: 9.4,
                type: '2D'
            },
            {
                title: '贝肯熊2：金牌特工',
                img: 'https://p0.meituan.net/movie/70ed5d23afc45de7749dfafa2a8a1bd23977288.jpg@320w_440h_1e_1c',
                rate: 8.9,
                type: '3DIMAX'
            },
            {
                title: '流浪猫鲍勃2：鲍勃的礼物',
                img: 'https://p1.meituan.net/mmdb/defb0d5f7845b6a2b3e7444e03afa5d7278009.jpg@320w_440h_1e_1c',
                rate: 8.0
            },
            {
                title: '1921',
                img: 'https://p1.meituan.net/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg@320w_440h_1e_1c',
                rate: 9.4
            },
            {
                title: '新大头儿子和小头爸爸4：完美爸爸',
                img: 'https://p0.meituan.net/movie/df89b11a57dd63760a6c3d544c61e4a83956828.jpg@320w_440h_1e_1c',
                rate: 8.8
            }
        ]

        //类式组件
        class App extends React.Component{
            render(){
                return <div className="container">
                            <h2>正在热映(60部)</h2>
                            <div className="movie-list">
                                {
                                    movies.map((item, index) => {
                                        return <div className="item" key={index}>
                                                    <div className="img">
                                                        {item.type && <div className="type">{item.type}</div>}
                                                        <img width="100%" src={item.img} alt=""/>
                                                    </div>
                                                    <div className="title">{item.title}</div>
                                                </div>
                                    })
                                }
                                
                            </div>
                        </div>
            }
        }

        //渲染
        ReactDOM.render(<App />, document.querySelector("#root"));
    </script>
</body>

</html>